/**
* @Description: WoShop商城
* @Author: wutong
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="gift-wrap">
		<view class="gift-title-wrap">
			<view class="gift-title-left">
				<uni-icons type="gift" size="22" color="#F9CE13"></uni-icons><text class="gift-title-text">礼物打赏</text>
			</view>
			<view class="gift-title-right" @click="rechargeGoldcoin()">
				<uni-icons type="wallet" size="16" color="#F9CE13"></uni-icons>
				<text class="wallet-coin">{{goldCoin}}</text>
				<uni-icons type="right" size="13" color="#A0A0A3"></uni-icons>
			</view>
		</view>
		<scroll-view scroll-y="true" show-scrollbar="false" style="height: 600rpx;">
			<view class="grid-wrap">
				<uni-grid :column="4" :highlight="false" @change="change" :showBorder="false" :square="false">
					<uni-grid-item v-for="(item, index) in giftList" :index="index" :key="index" class="grid-item">
						<view class="grid-item-box" :class="clickGridItemIndex == index ? 'grid-item-box-active' : ''">
							<image :src="item.pic" class="gift-image" mode="aspectFill" />
							<text class="gift-name" v-if="clickGridItemIndex != index">{{item.name}}</text>
							<text class="gift-coin">{{item.gift_coin}}金币</text>
							<view class="give" v-if="clickGridItemIndex == index">
								<text class="give-text" @click="giveGift(item)">赠送</text>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {

		name: 'gift',
		data() {
			return {
				show: true,
				modeClass: 'fade',
				styles: {},
				clickGridItemIndex: 999
			}
		},
		props: {
			giftList: {
				type: Array,
				default: () => {
					{}
				}
			},
			goldCoin: {
				type: String,
				default: '0'
			}
		},
		mounted() {
			
		},
		methods: {
			transitionChange(){
				
				setTimeout(() => {
					this.show = false
				}, 1000)
				
			},
			change(e) {
				let {
					index
				} = e.detail
				
				this.clickGridItemIndex = index
		 
			},
			giveGift(item){
				console.log(item);
				let data = {gift_id:item.id,gift_coin:item.gift_coin}
				this.$emit('giveGift',data)
			},
			rechargeGoldcoin(){
				this.$u.route('/pagesC/wallet/rechargeGoldcoin');
			}
		 
		}
	}
</script>

<style lang="scss" scoped>
	// @import '@/static/css/mixins.scss';

	.gift-wrap {
		height: 700rpx;
		background-color: #161822;
	}
	
	.gift-title-wrap{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 40rpx;
		line-height: 40rpx;
	}
	
	.gift-title-left{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	
	.gift-title-text{
		color: #F9CE13;
		font-size: 30rpx;
	}
	
	.gift-title-right{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		color: #FFF;
	}
	
	.wallet-coin{
		color: #A0A0A3;
		font-size: 28rpx;
		margin: 0 6rpx;
	}
	
	
	.gift-image {
		width: 110rpx;
		height: 110rpx;
	}

	.grid-wrap {
		background-color: #161823;
		padding-bottom: 60rpx;
	}
	
	.grid-item{
		width: 25%;
	}

	.grid-item-box {
		width: 90px;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		justify-content: center;
		padding: 20rpx 0 0;
		z-index: 999999999;
	}
	
	.grid-item-box-active{
		border-width: 2rpx;
		border-style: solid;
		border-color: #161823;
		background-color: rgba(54, 55, 81, 0.6);
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.give{
		background-color: #FE004E;
		height: 50rpx;
		width: 100%;
		border-radius: 0 0 20rpx 20rpx;
		text-align: center;
	}
	
	.give-text{
		font-size: 26rpx;
		color: #FFF;
		text-align: center;
		line-height: 50rpx;
	}
	
	.gift-name {
		font-size: 26rpx;
		line-height: 40rpx;
		color: #fff;
	}
	
	.gift-coin{
		font-size: 22rpx;
		color: #FFF;
		text-align: center;
		line-height: 40rpx;
	}
	
</style>